<template>
<div class="container">
    <div class="header">
        <NavBar title="余额充值" left-arrow color="#333333" @click-left="back" @click-right="backHome">
            <template #right>
                <Icon name="wap-home-o" size="20" />
            </template>
        </NavBar>
    </div>
    <div class="main">
        <div class="chosemoney">
            <div class="title">充值余额</div>
            <div class="items flex align-items flex-start flex-wrap">
                <div class="item" :class="{active:current == idx}" v-for='(item,idx) in chongList' :key='idx' @click='current = idx'>
                    <div class="txt1">¥{{ item.money }}</div>
                    <div class="send">赠送{{ item.give }}元</div>
                </div>
            </div>
        </div>
        <div class="pay-type flex align-items space-between">
            <div class="left">支付方式</div>
            <div class="right flex align-items flex-end">
                <img :src="payPic" alt="">
                <span>微信支付</span>
            </div>
        </div>
        <div class="btns">
            <Button type="info" block @click='submit'>支付</Button>
        </div>
    </div>
</div>
</template>

<script>
import {
    NavBar,
    Icon,
    Button,
    Dialog,
} from "vant";
import payPic from '@/assets/pay_weixin.png';
import { getWxChong , getChongList } from '@/model/api';
import wx from 'weixin-jsapi';
export default {
    components: {
        NavBar,
        Icon,
        Button
    },
    data() {
        return {
            payPic,
            chongList: [], //充值卡包
            current: 0,
        };
    },
    methods: {
        //获取当前充值列表
        async getList(){
            let { code , data } = await getChongList();
            if(code == 1){
                this.chongList = data;
            }
        },
        submit() {
            var target = this.chongList[this.current];
            getWxChong({id:target.id}).then( res => {
                var _this = this;
                if(res.code == 1){
                    wx.ready(() => {
                        wx.chooseWXPay({
                            appId:res.data.appId,
                            timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 
                            package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                            signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: res.data.paySign, // 支付签名
                            success(res) {
                                Dialog.alert({
                                    title: '提示',
                                    message: '充值成功',
                                }).then( () => {
                                    _this.$router.go(-1);
                                })
                            },
                            cancel(res) {
                                _this.$toast('已取消支付');
                            },
                            fail(res) {
                                _this.$toast('支付失败，请重试');
                            }
                        })
                    })
                }
            })
        }
    },
    created(){
        this.getConfig(['chooseWXPay']);
        this.getList();
    }
};
</script>

<style lang="less" scoped>
.chosemoney {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 0 14px;

    .title {
        width: 100%;
        padding: 15px 0;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #222222;
    }
    .items {
        width: 100%;
        height: auto;
        padding-bottom: 5px;
        .item {
            width: 104px;
            height: 60px;
            border: 1px solid #CCCCCC;
            border-radius: 3px;
            margin: 0 5px 10px;
            .txt1 {
                width: 100%;
                text-align: center;
                font-size: 18px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #333333;
                margin-top: 6px;
                margin-bottom: 2px;
            }
            .send {
                width: 100%;
                text-align: center;
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #FF5522;
            }
        }

        .active {
            border: 0;
            background: #5652FF;

            .txt1 {
                color: #fff;
            }

            .send {
                color: #fff;
            }
        }
    }
}

.pay-type {
    width: 100%;
    height: 55px;
    padding: 0 13px;
    background-color: #fff;
    margin-top: 5px;

    .left {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #222222;
    }

    .right img {
        width: 18px;
        height: auto;
        margin: 0;
        margin-right: 5px;
    }

    .right span {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #222222;
    }
}

.btns {
    width: 100%;
    padding: 0 14px;
    margin-top: 50px;
}
</style>
